var left = document.querySelector('.left')
    var right = document.querySelector('.right')
    var l = echarts.init(left)
    var R = echarts.init(right)
    l.setOption({
        title: { //图表的标题
            text: 'Online Store Visitors',
            left: 'left',
        },
        legend: { //图例
            bottom: 10,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th']
        },
        yAxis: [{ // 纵轴标尺固定
            type: 'value',
            scale: true,
            max: 200,
            min: 0,
            splitNumber: 20,

        }],
        series: [
            {
                name: 'This Week',
                type: 'line',
                data: [100, 120, 170, 162, 180, 175, 160],
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'skyblue', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        borderColor: 'skyblue', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折线的宽度
                        shadowBlur: 1,
                        shadowColor: 'skyblue'
                    }
                }
            },
            {
                name: 'Last Week',
                type: 'line',
                data: [60, 80, 70, 65, 80, 76, 100],
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'grey', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        borderColor: 'grey', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折线的宽度
                        shadowBlur: 1,
                        shadowColor: 'grey'
                    }
                }
            },

        ]
    })

    R.setOption({
        title: { //图表的标题
            text: 'Sales Over Time',
            left: 'left',
        },
        legend: { //图例
            bottom: 10,
            right: 10
        },
        xAxis: {// X轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: [{ // 纵轴标尺固定
            type: 'value',
            scale: true,
            max: 3000,
            min: 0,
            splitNumber: 3,

        }],
        series: [
            {
                name: 'This year',
                barWidth: 20,
                // showBackground:true,
                backgroundStyle: {
                    //color: '',
                    borderRadius: 20, //背景圆角
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: '#600030' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#28004d' }
                ]),
                type: 'bar',
                data: [1000, 2000, 3000, 2600, 2800, 2700, 3000]
            },
            {
                name: 'Last year',
                barWidth: 20,
                // showBackground:true,
                backgroundStyle: {
                    //color: '',
                    borderRadius: 20, //背景圆角
                },

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#83bff6' },
                    { offset: 1, color: '#820041' }
                ]),
                type: 'bar',
                data: [800, 1800, 2700, 2000, 1800, 1500, 2000]
            }
        ]
    })


    // var str1 = `
    //         <span>Online Store Visitors</span>
    //         <span>View Report</span>

    // `
    // left.innerHTML=str1
    // var str2=`
    //         <span>Sales</span>
    //         <span>View Report</span>

    // `
    // right.innerHTML=str2
    var pEle = document.querySelectorAll('p')
    for (let i = 0; i < pEle.length; i++) {
        pEle[i].onclick = function () {
            for (let j = 0; j < pEle.length; j++) {
                pEle[j].classList.remove('active')
            }
            this.className='active'
        }
    }